<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form
          ref="form"
          :inline="true"
          label-width="80px"
          :model="queryForm"
          @submit.native.prevent
        >
          <el-form-item label="小区名称" prop="areaNo">
            <el-select
              v-model="queryForm.areaNo"
              clearable
              placeholder="请输入小区名称"
            >
              <el-option
                v-for="item in cellCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围" prop="queryDate">
            <el-date-picker
              v-model="queryForm.queryDate"
              clearable
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              :loading="isQuerying"
              native-type="submit"
              type="primary"
              @click="handleQuery"
            >
              查询
            </el-button>
            <el-button icon="el-icon-refresh-left" @click="resetQuery">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <tend
          :area-no="areaNo"
          :end-date="endDate"
          :start-date="startDate"
          @dataReady="dateReady"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import Tend from '@/views/index/components/Tend'

  export default {
    name: 'TrafficPage',
    components: {
      Tend,
    },
    data() {
      return {
        isQuerying: false,
        queryForm: {
          areaNo: '',
          queryDate: [],
        },
        initOptions: {
          renderer: 'svg',
        },
        option: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          legend: {
            data: ['人流量', '车流量'],
            top: 0,
            padding: 10,
          },
          grid: {
            top: '10%',
            left: '0',
            right: '0',
            bottom: '0',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: [
                '1月',
                '2月',
                '3月',
                '4月',
                '5月',
                '6月',
                '7月',
                '8月',
                '9月',
                '10月',
                '11月',
                '12月',
              ],
              boundaryGap: false,
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: '人流量',
              type: 'line',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {},
              areaStyle: {
                opacity: 0.8,
              },
            },
            {
              name: '车流量',
              type: 'line',
              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
              symbol: 'circle',
              smooth: true,
              yAxisIndex: 0,
              showSymbol: false,
              lineStyle: {},
              areaStyle: {
                opacity: 0.8,
              },
            },
          ],
        },
        areaNo: '',
        startDate: '',
        endDate: '',
      }
    },
    computed: {
      ...mapGetters({
        cellCode: 'dict/cellCode',
      }),
    },
    created() {},
    methods: {
      handleQuery() {
        this.getChartData()
      },
      getChartData() {
        const startDate = this.queryForm.queryDate[0]
        const endDate = this.queryForm.queryDate[1]
        if (!this.queryForm.areaNo) {
          this.$baseMessage(
            '请选择小区名称！',
            'error',
            'vab-hey-message-error'
          )
          return
        }
        if (!startDate) {
          this.$baseMessage(
            '开始时间不能为空！',
            'error',
            'vab-hey-message-error'
          )
          return
        }
        if (!endDate) {
          this.$baseMessage(
            '结束时间不能为空！',
            'error',
            'vab-hey-message-error'
          )
          return
        }
        if (startDate && endDate) {
          if (new Date(endDate) - new Date(startDate) > 2592000000) {
            this.$baseMessage(
              '最大查询时间范围不能超过1个月！',
              'error',
              'vab-hey-message-error'
            )
            return
          }
        }
        this.areaNo = this.queryForm.areaNo
        this.startDate = startDate
        this.endDate = endDate
        this.isQuerying = true
      },
      dateReady() {
        this.isQuerying = false
      },
      resetQuery() {
        this.$refs['form'].resetFields()
        this.getChartData()
      },
    },
  }
</script>
